package myJs.search.detail

import myJs.cps._
import myJs.myPkg.ReactRouterDOM
import myJs.myPkg.tabs._
import myJs.myPkg.tabs.Tab
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.web.html._
import typings.csstype.csstypeStrings
import myJs.Implicits._
import myJs.api.Api
import org.scalajs.dom.URLSearchParams

/**
 * Created by yz on 21/1/2022
 */
@react object HCp {

  case class Props(geneName: String)

  val component = FunctionalComponent[Props] { props =>

    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val tabP = searchParams.get("tab").null2Empty
    val myInitTab = List("tissue", "singleCell", "cellLine")(0)
    val initTab = if (tabP.isBlank) myInitTab else tabP
    val (tab, setTab) = useState(initTab)


    object FTool {

      def tabChange = (v: String) => {
        setTab(v)
      }

    }

    div(style := Style(display = csstypeStrings.flex),
      img(style := Style(height = 40,marginRight = 5), src := s"${Api.images}/homo.png"),
      div(className := "hcp",
        Tabs(id = "tab", activeKey = tab, onSelect = FTool.tabChange, transition = false)(
          Tab(eventKey = "tissue", title = "Tissue")(
            div(style := Style(marginTop = "20px"),
              HTissueCp(showLoading = (tab == "tissue"), geneName = props.geneName)
            )
          ),
          Tab(eventKey = "singleCell", title = "Single Cell")(
            div(style := Style(marginTop = "20px"),
              SingleCellCp(geneName = props.geneName, showLoading = (tab=="singleCell"), defaultAnchor = "dot"),
            ),
          ),
          Tab(eventKey = "cellLine", title = "Cell Line")(
            div(style := Style(marginTop = "20px"),
              CellLineCp(showLoading = (tab == "cellLine"), geneName = props.geneName)
            )
          ),
        ),
      )


    )

  }

  object STool {


  }

}
